<template>
    <div class="repayment-ranking">
        <!-- 页面标题 + 返回按钮 -->
        <div class="page-header">
            <h2 class="page-title">各品牌 覆盖 美容院门店
            </h2>
            <el-button type="default" class="return-btn" @click="handleReturn">返回</el-button>
        </div>

        <!-- 进度条排名区域（与设计图完全一致） -->
        <div class="progress-ranking">
            <div class="rank-item" v-for="(item, index) in progressData" :key="index">
                <span class="rank-label">{{ item.rank }}：</span>
                <div class="progress-wrap">
                    <el-progress :percentage="item.percent" :stroke-width="12" :color="item.color" :text-inside="false"
                        :format="() => ''" class="progress-bar" />
                    <!-- 名称悬浮在进度条上方（与设计图位置一致） -->
                    <span class="rank-name">{{ item.name }}</span>
                </div>
                <span class="rank-amount">{{ item.amount }}</span>
            </div>
        </div>

        <!-- 筛选与搜索区域 -->
        <div class="filter-area">
            <div class="tab-label">
                <el-radio-group v-model="date" size="large"   fill="#4ecdc4">
                    <el-radio-button label="今日" value="今日" />
                    <el-radio-button label="本周" value="本周" />
                    <el-radio-button label="本月" value="本月" />
                 
                </el-radio-group>
            </div>
            <div class="filter-group">

                <el-input v-model="searchKey" placeholder="请输入关键字" class="search-input" />
                <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
                <el-button type="danger" class="search-btn" @click="handleSearch">导出</el-button>

            </div>
        </div>

        <!-- 数据表格 -->
        <el-table :data="tableData" border class="data-table" style="width: 100%">
            <el-table-column prop="rank" label="序号" />
            <el-table-column prop="storeName" label="品牌" />
            <el-table-column prop="contact" label="门店" />
            <el-table-column prop="phone" label="门店地址" />
            <el-table-column prop="brand" label="入驻" />
            <el-table-column prop="date" label="入驻时间" />
            <el-table-column prop="outAmount" label="品牌产品数" />
        
        </el-table>

        <!-- 分页栏 -->
        <div class="pagination-area">
            <span class="total-text">共 10 条 共 10 页</span>
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10]"
                :total="10" layout="prev, pager, next" @current-change="handlePageChange" background />
            <span class="page-size-select">
                <el-select v-model="pageSize" @change="handleSizeChange">
                    <el-option label="10条/页" value="10" />
                </el-select>
            </span>
            <span class="jump-area">
                跳至
                <el-input v-model="jumpPage" class="jump-input" />
                页
                <el-button type="primary" class="jump-btn" @click="handleJump">确定</el-button>
            </span>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const date = ref('今日');

// 返回按钮事件
const handleReturn = () => {
    console.log('点击返回');
};

// 进度条排名数据（匹配设计图的进度长度）
const progressData = ref([
    {
        rank: '第一名',
        name: '品牌A',
        amount: '222333元',
        percent: 60,
        color: '#ED5565'
    },
    {
        rank: '第二名',
        name: '品牌A',
        amount: '222122元',
        percent: 55,
        color: '#ED5565'
    },
    {
        rank: '第三名',
        name: '品牌A',
        amount: '222322元',
        percent: 50,
        color: '#ED5565'
    },
    {
        rank: '第四名',
        name: '品牌A',
        amount: '222122元',
        percent: 25,
        color: '#23C6C8'
    }
]);


// 搜索关键词
const searchKey = ref('');

// 搜索事件
const handleSearch = () => {
    console.log('搜索关键词：', searchKey.value);
};

// 导出事件
const handleExport = () => {
    console.log('导出数据');
};

// 表格数据（与设计图完全一致）
const tableData = ref([
    {
        rank: 1,
        storeName: '陈皮美容院',
        contact: '陈皮',
        phone: '13260035236',
        brand: '鸿星尔克',
        inAmount: '¥99999',
        outAmount: '¥77777',
        totalAmount: '¥1000000',
        date: '2023-01-01'
    },
    {
        rank: 2,
        storeName: '金角美容院',
        contact: '金角',
        phone: '13260035236',
        brand: '雅诗兰黛',
        inAmount: '¥99999',
        outAmount: '¥77777',
        totalAmount: '¥1000000',
        date: '2023-02-01'
    },
    {
        rank: 3,
        storeName: '丹纳美容院',
        contact: '丹纳',
        phone: '13260035236',
        brand: 'Fc',
        inAmount: '¥99999',
        outAmount: '¥77777',
        totalAmount: '¥1000000',
        date: '2023-03-01'
    },
    {
        rank: 4,
        storeName: 'MVC美容院',
        contact: 'MVC',
        phone: '13260035289',
        brand: 'MVC',
        inAmount: '¥99999',
        outAmount: '¥77777',
        totalAmount: '¥1000000',
        date: '2023-04-01'
    }
]);

// 分页状态
const currentPage = ref(1);
const pageSize = ref(10);
const jumpPage = ref(1);

// 分页切换
const handlePageChange = (page) => {
    currentPage.value = page;
    jumpPage.value = page;
    console.log('切换到第', page, '页');
};

// 每页条数切换
const handleSizeChange = (size) => {
    pageSize.value = size;
    currentPage.value = 1;
    jumpPage.value = 1;
    console.log('每页显示', size, '条');
};

// 跳页事件
const handleJump = () => {
    const page = Number(jumpPage.value);
    if (page >= 1 && page <= 10) {
        currentPage.value = page;
        console.log('跳转到第', page, '页');
    }
};
</script>

<style scoped>
/* 页面基础样式 */
.repayment-ranking {
    padding: 20px;
    font-family: "Microsoft Yahei", sans-serif;
    background: #fff;
}

/* 页面头部 */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;

}

.page-title {
    font-size: 20px;
    color: #333;
    font-weight: 700;
    margin: 0;
    text-align: center;
    width: 100%;
    margin-bottom: 50px;
}

.return-btn {
    border-radius: 4px;
    padding: 6px 12px;
}

/* 进度条排名区域（核心匹配设计图） */
.progress-ranking {
    margin-bottom: 40px;
    padding: 0 20px;
}

.rank-item {
    display: flex;
    align-items: center;
    margin: 30px 0;
    gap: 10px;
}

.rank-label {
    width: 80px;
    font-size: 16px;
    color: #333;
    text-align: right;
}

.progress-wrap {
    flex: 1;
    position: relative;
    height: 12px;
}

.progress-bar {
    width: 100%;
    height: 12px;
}

/* 名称悬浮在进度条上方（与设计图位置一致） */
.rank-name {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    color: #333;
    z-index: 1;
    font-weight: 700;
}

.rank-amount {
    width: 100px;
    font-size: 14px;
    color: #666;
    text-align: right;
}

/* 进度条样式 */
.el-progress__bar {
    border-radius: 6px;
}

.el-progress__text {
    display: none;
}

/* 筛选区域（匹配设计图的标签+筛选布局） */
.filter-area {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.tab-label {
    width: 250px;
    padding: 8px 12px;
    /* background-color: #f5f7fa;
    border: 1px solid #e0e0e0; */
    border-right: none;
    border-radius: 4px 0 0 4px;
    font-size: 14px;
    color: #666;
}

.filter-group {

    width: 100%;
    padding-left: 10px;
    border-left: 1px solid #e0e0e0;
    text-align: right;
}

.date-picker {
    width: 15 0px;
}

.search-input {
    width: 180px;
}

.search-btn {
    /* background-color: #4ecdc4;
    border-color: #4ecdc4; */
}

.export-btn {
    border-color: #dcdfe6;
}

/* 表格样式（匹配设计图的单元格样式） */
.data-table {
    --el-table-header-text-color: #333;
    --el-table-body-text-color: #666;
    --el-table-border-color: #e0e0e0;
    margin-bottom: 20px;
}

.data-table th,
.data-table td {
    padding: 8px 12px;
    font-size: 14px;
    border-right: 1px solid #e0e0e0;
}

.data-table th:last-child,
.data-table td:last-child {
    border-right: none;
}

.detail-btn {
    background-color: #4ecdc4;
    border-color: #4ecdc4;
    padding: 4px 12px;
}

/* 分页栏样式 */
.pagination-area {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
    color: #666;
}

.total-text {
    margin-right: 5px;
}

.page-size-select .el-select {
    width: 80px;
}

.jump-area {
    display: flex;
    align-items: center;
    gap: 5px;
}

.jump-input {
    width: 50px;
}

.jump-btn {
    background-color: #4ecdc4;
    border-color: #4ecdc4;
    padding: 4px 10px;
}

/* 分页按钮激活态 */
.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #4ecdc4;
    color: #fff;
}
</style>